<!-- 抄表 -->
<template>
	<view class="no-warpper">
		<view class="nl-shadow-box" v-if="hasNet == 'true'">
			<scroll-view scroll-y="true" class="scroll-box">
				<view class="nl-flex-list">
					<text class="nl-margin-right">费用类型</text>
					<view :class="feeTypesName ? 'right':'right-grey'" @click="feeTypeShow = true">
						{{feeTypesName ? feeTypesName : '请选择费用类型'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list">
					<text class="nl-margin-right">收费项目</text>
					<view :class="feeConfigsName ? 'right':'right-grey'" @click="feeNameChange()">
						{{feeConfigsName ? feeConfigsName : '请选择收费项目'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list" @click="selectFloor()">
					<text class="nl-margin-right">楼栋</text>
					<view :class="data.floorName ? 'right':'right-grey'">{{data.floorName ? data.floorName : '请选择楼栋'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list" @click="selectUnit()">
					<text class="nl-margin-right">单元</text>
					<view :class="data.unitNum ? 'right':'right-grey'">{{data.unitNum ? data.unitNum+"单元" : '请选择单元'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list" @click="selectHouse()">
					<text class="nl-margin-right">房屋</text>
					<view :class="data.roomNum ? 'right':'right-grey'">{{data.roomNum ? data.roomNum+"室": '请选择房屋'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list">
					<text class="nl-margin-right">上期度数</text>
					<u-input class="input" v-model="addMeterWaterInfo.preDegrees" type="text" placeholder="请输入上期度数" />
				</view>
				<view class="nl-flex-list">
					<text class="nl-margin-right">本期度数</text>
					<u-input class="input" v-model="addMeterWaterInfo.curDegrees" type="text" placeholder="请输入本期度数" />
				</view>
				<view v-if="addMeterWaterInfo.feeTypeCd == '888800010015'">
					<view class="nl-flex-list" style="justify-content: space-between;">
						<text class="nl-margin-right">是否超出用水</text>
						<u-radio-group v-model="addMeterWaterInfo.isExcess" placement="row">
							<u-radio activeColor="#1585FC" name="是">是</u-radio>
							<u-radio activeColor="#1585FC" name="否">否</u-radio>
						</u-radio-group>
					</view>
					<view class="nl-flex-list" style="justify-content: space-between;">
						<text class="nl-margin-right">是否加压</text>
						<u-radio-group v-model="addMeterWaterInfo.isCompression" placement="row" @change="isCompressionChange">
							<u-radio activeColor="#1585FC" name="是">是</u-radio>
							<u-radio activeColor="#1585FC" name="否">否</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="nl-flex-list" v-if="addMeterWaterInfo.isCompression == '是'">
					<text class="nl-margin-right">加压收费标准</text>
					<view :class="addMeterWaterInfo.compressionStandard ? 'right':'right-grey'"
						@click="compressionStandardShow = true">
						{{addMeterWaterInfo.compressionStandard ? addMeterWaterInfo.compressionStandard : '请选择费用类型'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list" @click="previousTimeShow = true">
					<text class="nl-margin-right">上期读表时间</text>
					<view :class="preReadingTime ? 'right':'right-grey'">
						{{preReadingTime ? preReadingTime : '请选择时间'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list" @click="issueTimeShow = true">
					<text class="nl-margin-right">本期读表时间</text>
					<view :class="curReadingTime ? 'right':'right-grey'">
						{{curReadingTime ? curReadingTime : '请选择时间'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>

				<view class="nl-flex-list">
					<text class="nl-margin-right">备注</text>
				</view>

				<view class="nl-flex-list">
					<view class="textarea-padding">
						<u-input v-model="addMeterWaterInfo.remark" placeholder-style="color: #AFAFAF;font-size: 28rpx;"
							type="textarea" border placeholder="请输入备注信息" />
					</view>
				</view>
			</scroll-view>
			<view class="button-lg">
				<button @click="submit()">提交</button>
			</view>

		</view>
		<view v-else>
			<netError v-if="hasNet == 'false'" @refresh="refresh()"></netError>
		</view>
		<!-- 加压收费标准列表 -->
		<u-select v-model="compressionStandardShow" mode="single-column" :list="compressionStandard"
			@confirm="compressionStandardChange()">
		</u-select>

		<!-- 费用类型列表 -->
		<u-picker v-model="feeTypeShow" mode="selector" :range="feeTypes" @confirm="feeTypesChange"></u-picker>

		<!-- 收费项目列表 -->
		<u-picker v-model="feeConfigsShow" range-key="feeName" mode="selector" :range="feeConfigs" @confirm="feeName">
		</u-picker>

		<!-- 上期时间选择器 -->
		<u-picker mode="time" v-model="previousTimeShow" :params="params" @confirm="previousTimeConfirm"></u-picker>

		<!-- 本期时间选择器 -->
		<u-picker mode="time" v-model="issueTimeShow" :params="params" @confirm="issueTimeConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		listFeeConfigs,
		saveMeterWater,
		queryPreMeterWater
	} from '@/api/meterReading.js'
	import {
		dateFormat,
		Datetab,
		getDateYYYYMMDDHHMISS
	} from '@/utils/dateUtil.js'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				feeType_index: -1, //费用类型下标
				feeIndex: -1, //收费项目下标
				addMeterWaterInfo: {
					waterId: '', //主建ID，默认不传
					meterType: '', //表类型
					preDegrees: '', //上期度数
					curDegrees: '', //本期度数
					preReadingTime: '', //上期时间
					curReadingTime: '', //本期时间
					remark: '', //备注
					roomId: '', //房屋ID
					objId: '', //对象ID   观察后台传入的此ID为房屋ID
					objName: '', //x栋x单元xxx室
					feeTypeCd: '', // 传入的收费类型，水费为888800010015，电费888800010016
					// feeConfigs: [], //收费项目
					configId: '', //收费项目ID
					objType: '1001', //类型 1001为房屋，2002为车位
					hasRoom: false, //未知
					ownerName: '', //收费对象  默认传空
					payerObjType: '3333',
					storeId: '',
					isExcess: '',
					isCompression: '',
					compressionStandard: ''
				},
				preReadingTime: dateFormat("YYYY-mm-dd", new Date()), //上期时间
				curReadingTime: dateFormat("YYYY-mm-dd", new Date()), //本期时间
				feeConfigs: [], //收费项目
				data: {
					floorName: '',
					floorId: '',
					floorNum: '',
					unitNum: '',
					unitId: '',
					roomNum: '',
					roomId: '',
				},
				feeTypes: ['水费', '电费'],
				feeTypesName: '',
				feeTypeShow: false,
				feeConfigsShow: false,
				feeConfigsName: '',
				compressionStandardShow: false,
				compressionStandard: [{
					label: '一次加压水费'
				}, {
					label: '二次加压水费'
				}, {
					label: '三次加压水费'
				}],
				endDate: dateFormat("YYYY-mm-dd", new Date()),

				previousTimeShow: false, //上期时间选择器
				issueTimeShow: false, //本期时间选择器
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				hasNet: '', //是否有网络
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		watch: {
			'data.roomId': {
				handler(newName, oldName) {
					this.addMeterWaterInfo.roomId = newName
					console.log('获取roomid', this.addMeterWaterInfo.roomId)
					// 获取上期度数
					this._queryPreMeterWater(this.addMeterWaterInfo.roomId)
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			/*
			 * 加压收费标准确认
			 */
			compressionStandardChange(e) {
				this.addMeterWaterInfo.compressionStandard = e[0].label
			},
			/**
			 * @param {Object} e
			 */
			isCompressionChange(){
				this.addMeterWaterInfo.compressionStandard = ''
			},
			/*
			 * 费用类型确认
			 */
			feeTypesChange(e) {
				this.feeType_index = e[0]
				this._changeAddMeterWaterFeeTypeCd(this.feeType_index)
				for (let i in this.feeTypes) {
					if (i == this.feeType_index) {
						this.feeTypesName = this.feeTypes[i]
					}
				}
				if (this.feeType_index == 0) { //水表
					this.addMeterWaterInfo.feeTypeCd = '888800010015'
					this.addMeterWaterInfo.meterType = '2020'
				} else if (this.feeType_index == 1) { //电表
					this.addMeterWaterInfo.feeTypeCd = '888800010016'
					this.addMeterWaterInfo.meterType = '1010'
				}
				this._queryPreMeterWater(this.addMeterWaterInfo.roomId)
			},
			/*
			 *  收费项目弹框
			 */
			feeNameChange() {
				if (this.feeType_index == -1) {
					uni.showToast({
						title: "请先选择费用类型",
						icon: 'none'
					});
					return;
				}
				this.feeConfigsShow = true
			},
			/*
			 *  收费项目确认
			 */
			feeName(e) {
				this.feeIndex = e[0]
				for (let i in this.feeConfigs) {
					if (i == this.feeIndex) {
						this.addMeterWaterInfo.configId = this.feeConfigs[i].configId
						this.feeConfigsName = this.feeConfigs[i].feeName
					}
				}
			},
			/*
			 * 获取上期读数
			 */
			_queryPreMeterWater: function(_roomId) {
				var _that = this
				let _meterType = '1010';
				let _feeTypeCd = this.feeType_index;
				if (_feeTypeCd == 0) {
					_meterType = '2020';
				}
				let param = {
					communityId: this.userCommunity.communityId,
					objId: _roomId,
					objType: this.addMeterWaterInfo.objType,
					meterType: _meterType
				};
				queryPreMeterWater(param).then((res) => {
					console.log('获取上期抄表', res)

					let _total = res.total;
					if (_total < 1) {
						_that.addMeterWaterInfo.preDegrees = '0';
						_that.hasNet = 'true'
						return;
					}
					_that.addMeterWaterInfo.preDegrees = res.data[0].curDegrees
					_that.preReadingTime = res.data[0].curReadingTime.substring(0, 10)
					_that.hasNet = 'true'
				}).catch(function(reason) {
					_that.hasNet = 'false'
				})
			},
			/*
			 * 获取收费项目
			 */
			_changeAddMeterWaterFeeTypeCd: function(_feeTypeCd) {
				if (_feeTypeCd == 0) {
					_feeTypeCd = '888800010015'
				} else if (_feeTypeCd == 1) {
					_feeTypeCd = '888800010016'
				}
				var _that = this
				var param = {
					page: 1,
					row: 20,
					communityId: this.userCommunity.communityId,
					feeTypeCd: _feeTypeCd,
					isDefault: 'F',
					valid: '1'
				};

				listFeeConfigs(param).then((res) => {
					console.log('获取收费项目', res)
					_that.feeConfigs = res.feeConfigs
					_that.hasNet = 'true'
				}).catch(function(reason) {
					_that.hasNet = 'false'
				})
			},

			/**
			 * 选择楼栋
			 */
			selectFloor() {
				uni.navigateTo({
					url: '../../selectHome/selectFloors/selectFloors'
				})
			},
			/**
			 * 选择单元
			 */
			selectUnit() {
				if (!this.data.floorId) {
					uni.showToast({
						title: "请先选择楼栋",
						icon: 'none',
						duration: 1500
					})
					return
				}
				uni.navigateTo({
					url: `../../selectHome/selectUnit/selectUnit?floorId=${this.data.floorId}`
				})
			},
			/**
			 * 选择房屋
			 */
			selectHouse() {
				if (!this.data.floorId) {
					uni.showToast({
						title: "请先选择楼栋",
						icon: 'none',
						duration: 1500
					})
					return
				}

				if (!this.data.unitId) {
					uni.showToast({
						title: "请先选择单元",
						icon: 'none',
						duration: 1500
					})
					return
				}
				uni.navigateTo({
					url: `../../selectHome/selectHouse/selectHouse?floorId=${this.data.floorId}&unitId=${this.data.unitId}`
				})
			},
			/**
			 * 上期时间确认
			 */
			previousTimeConfirm(e) {
				console.log('上期', e)
				this.preReadingTime = e.year + '-' + e.month + '-' + e.day
				if (Datetab(this.preReadingTime, this.curReadingTime)) {
					uni.showToast({
						icon: 'none',
						title: '上期时间不得大于本期时间'
					})
					this.preReadingTime = ''
				}
			},
			/**
			 * 本期时间确认
			 */
			issueTimeConfirm(e) {
				console.log('本期', e)
				this.curReadingTime = e.year + '-' + e.month + '-' + e.day
				if (Datetab(this.preReadingTime, this.curReadingTime)) {
					uni.showToast({
						icon: 'none',
						title: '本期时间不得小于上期时间'
					})
					this.curReadingTime = ''
				}
			},
			/*
			 * 提交
			 */
			submit() {
				if (!this.checkForm()) { //校验表单
					return;
				}
				this.addMeterWaterInfo.communityId = this.userCommunity.communityId
				this.addMeterWaterInfo.objName = this.data.floorName + this.data.unitNum + '单元' + this.data
					.roomNum + '室'
				this.addMeterWaterInfo.objId = this.addMeterWaterInfo.roomId
				this.addMeterWaterInfo.curReadingTime = this.curReadingTime + ' 00:00:00'
				this.addMeterWaterInfo.preReadingTime = this.preReadingTime + ' 00:00:00'
				this.addMeterWaterInfo.storeId = this.userInfo.storeId
				console.log('-------', this.addMeterWaterInfo)
				console.log('校验通过')

				saveMeterWater(this.addMeterWaterInfo).then((res) => {
					console.log('水电抄表成功', res)
					uni.showToast({
						title: "提交成功",
						icon: 'none'
					});
					uni.navigateBack({
						delta: 1
					});
					_that.hasNet = 'true'
				}).catch(function(reason) {
					_that.hasNet = 'false'
				})
			},
			// 刷新
			refresh() {
				this.hasNet = 'true'
			},
			// 校验
			checkForm: function() {
				if (this.feeType_index == -1) {
					uni.showToast({
						title: "请先选择费用类型",
						icon: 'none'
					});
					return false;
				}
				if (this.addMeterWaterInfo.configId == '' || this.addMeterWaterInfo.configId == null) {
					uni.showToast({
						title: "请先选择收费项目",
						icon: 'none'
					});
					return false;
				}
				if (this.addMeterWaterInfo.configId == '' || this.addMeterWaterInfo.configId == null) {
					uni.showToast({
						title: "请先选择收费项目",
						icon: 'none'
					});
					return false;
				}
				if (this.data.floorId == null || this.data.floorId == '') {
					uni.showToast({
						title: "请先选择楼栋",
						icon: 'none'
					});
					return false;
				}
				if (this.data.unitId == null || this.data.unitId == '') {
					uni.showToast({
						title: "请先选择单元",
						icon: 'none'
					});
					return false;
				}

				if (this.addMeterWaterInfo.curDegrees == null || this.addMeterWaterInfo.curDegrees == '') {
					uni.showToast({
						title: "请输入本期读数",
						icon: 'none'
					});
					return false;
				}
				return true
			}
		}
	}
</script>

<style lang="scss">
	.textarea-padding {
		width: 100%;
		border-bottom: 2rpx solid $uni-bg-color-grey;
	}

	.input {
		flex: 1;
		font-size: $uni-font-size-base;
		text-align: right !important;

		input {
			text-align: right !important;
		}
	}

	.scroll-box {
		height: calc(100vh - 50rpx);
	}
</style>
